<template>
    <div class="chart">
        <div
            class="graphDiv"
            id="graphDiv"
            style="width: 100%; height: 1100px"
        ></div>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import Dygraph from 'dygraphs'
import { curveShow, visibility, getCsvHeadersName } from '../utils/csvUtils.js'
import {
    customPlotter,
    graph,
    initializeGraph,
    path,
    showLabel,
} from '../utils/dygraphs.js'
import colors from '../utils/colors.js'

onMounted(async () => {
    await getCsvHeadersName(path)
    const graphDiv = document.getElementById('graphDiv')
    initializeGraph(graphDiv)
})

onUnmounted(() => {
    if (graph) {
        graph.destroy()
        graph = null
    }
})

defineExpose({
    initializeGraph,
})
</script>

<style scoped>
.chart {
    width: 86%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 1%;
}

.graphDiv {
    position: absolute;
    margin-top: -550px;
    top: 50%;
    right: 0;
}

:deep(.dygraph-xlabel) {
    text-align: right;
}
:deep(.dygraph-ylabel) {
    width: 50px;
}
:deep(.dygraph-title) {
    text-align: center;
    margin-top: -50px;
}
:deep(.dygraph-label-rotate-right) {
    left: 0 !important;
}
</style>
